<template>
  <div class="order-item">
    <div class="left">
      <span class="shop_name">{{item.shop_name}}</span>
      <span>{{item.str}}</span>
    </div>
    <div class="right">
      <span class="status">{{item.status}}</span>
      <span class="price">￥ {{item.price}}</span>
      <van-button type="info">查看订单</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderItem',
  props: {
    item: {
      type: Object
      // required: true
    }
  },
  data () {
    return {

    }
  },
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.order-item {
  padding: 30px 10px;
  display: flex;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin: 10px 10px;
  box-shadow: 0px 10px 5px #ccc;
  .left {
    font-size: 30px;
    display: flex;
    padding: 20px 10px;
    flex-direction: column;
    .shop_name {
      padding-bottom: 10px;
    }
  }
  .right {
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    .status{
      text-align: center;
      color: green;
    }
    .price {
      text-align: center;
      color: red;
    }
    .van-button {
      font-size: 20px;
      width: 150px;
      height: 50px;
      padding-left: 0;
      padding-right: 0;
    }

  }
}
</style>
